<template>
	<a-modal v-model:visible="modelVisible" title="授课信息" hide-cancel draggable @ok="modelVisible = false">
		<a-list>
			<a-list-item v-for="item in pageData" :key="item.id">
				<a-tag color="blue" bordered>{{ item.className }} </a-tag> => <a-tag>{{ item.unitPrice }} 元/课时</a-tag>
				<a-popconfirm content="确认要删除本条课程信息?" type="error" @ok="delData(item.id)">
					<a-button size="small" type="text" status="danger" style="float: right">
						<template #icon>
							<icon-delete />
						</template>
					</a-button>
				</a-popconfirm>
			</a-list-item>
			<a-list-item>
				<a-input-group>
					<a-input v-model="formData.className" :style="{ width: '160px' }" placeholder="请输入课程名称" />
					<span style="margin-left: 10px; margin-right: 10px">=></span>
					<a-input v-model="formData.unitPrice" :style="{ width: '160px' }" placeholder="请输入课程单价" />
					<a-button size="small" type="primary" style="margin-left: 10px" @click="addData">
						<template #icon>
							<icon-plus />
						</template>
						增加
					</a-button>
				</a-input-group>
			</a-list-item>
		</a-list>
	</a-modal>
</template>
<script setup lang="ts">
// drawer框状态
import { reactive, ref } from 'vue';
import { Audit } from '@/api/types';
import { addClass, deleteClass, teacherClass } from '@/api/audit';
import { Message } from '@arco-design/web-vue';

const modelVisible = ref(false);

const pageData = ref<Audit.TeacherClass[]>([]);

interface ModelProps {
	visible: boolean;
	rowData: Audit.Teacher;
}

const formData = reactive({
	teacherId: 0,
	className: '',
	unitPrice: '',
});

// 接收父组件传过来的参数
const acceptParams = (params: ModelProps): void => {
	pageData.value = [];
	formData.teacherId = params.rowData.id;
	getData();
	modelVisible.value = params.visible;
};

const addData = async () => {
	if (formData.className === '' || formData.unitPrice === '') {
		Message.warning('信息不完整，无法提交');
		return;
	}
	await addClass(formData);
	getData();
	formData.className = '';
	formData.unitPrice = '';
	Message.success('数据新增成功');
};

const delData = async (id: number) => {
	await deleteClass(id);
	getData();
	Message.success('数据删除成功');
};

const getData = () => {
	teacherClass(formData.teacherId).then((res) => {
		pageData.value = res.body;
	});
};
defineExpose({
	acceptParams,
});
</script>

<style scoped lang="less"></style>
